<template>
  <div class="detail-page">
    <!-- 顶部图片轮播，返回箭头悬浮在左上角 -->
    <div class="detail-swiper">
      <svg class="back-arrow" viewBox="0 0 24 43" @click="goBack">
        <path d="M20 2 L4 21.5 L20 41" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>
      </svg>
      <div class="swiper-scroll" ref="swiperScroll" @scroll="onScroll">
        <img v-for="(img, idx) in detail.imgs" :key="idx" :src="img" class="detail-main-img" :class="{active: idx === currentImgIdx}" />
      </div>
      <div class="detail-thumb-list">
        <img v-for="(img, idx) in detail.imgs" :key="idx" :src="img" class="detail-thumb-img" :class="{active: idx === currentImgIdx}" @click="scrollToImg(idx)" />
        <span class="detail-thumb-count">共{{ detail.imgs.length }}款</span>
      </div>
    </div>
    <!-- 价格区 -->
    <div class="detail-price-bar">
      <span class="detail-old-price">￥{{ detail.oldPrice }}</span>
      <span class="detail-price">到手价￥{{ detail.price }}</span>
      <span class="detail-sold">已售{{ detail.sold }}</span>
    </div>
    <!-- 优惠标签 -->
    <div class="detail-tags">
      <span class="detail-tag" v-for="tag in detail.tags" :key="tag">{{ tag }}</span>
    </div>
    <!-- 商品标题和副标题 -->
    <div class="detail-title">{{ detail.title }}</div>
    <div class="detail-subtitle">{{ detail.subtitle }}</div>
    <!-- 服务信息 -->
    <div class="detail-service">
      <span class="service-item green">退货包运费</span>
      <span class="service-item">预计{{ detail.delivery }}小时内发货</span>
      <span class="service-item">假一赔四 7天无理由退货</span>
    </div>
    <!-- 商品描述 -->
    <div class="detail-desc">{{ detail.desc }}</div>
    <!-- 商品评论区（点击跳转新页面） -->
    <div class="detail-comment-bar2" @click="goComment">
      <div class="comment-bar-header">
        <span class="comment-bar-title">商品评价</span>
        <span class="comment-bar-more">查看全部 &gt;</span>
      </div>
      <div class="comment-bar-list">
        <div class="comment-bar-item">
          <img class="comment-avatar" :src="comments[0].avatar" />
          <div class="comment-bar-main">
            <div class="comment-bar-user-row">
              <span class="comment-bar-nick">{{ comments[0].user }}</span>
              <span class="comment-bar-tag">超赞</span>
              <span class="comment-bar-stars">★★★★★</span>
            </div>
            <div class="comment-bar-content">{{ comments[0].content }}</div>
            <div class="comment-bar-meta">
              <span class="comment-bar-date">{{ comments[0].date }}</span>
              <span class="comment-bar-place">{{ comments[0].place }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部操作栏 -->
    <div class="detail-bottom-bar">
      <div class="bottom-icon-group">
        <div class="bottom-icon-item">
          <svg class="bottom-icon"><use xlink:href="#icon-shangdian"></use></svg>
          <div class="bottom-icon-text">店铺</div>
        </div>
        <div class="bottom-icon-item">
          <svg class="bottom-icon"><use xlink:href="#icon-wodepinglun"></use></svg>
          <div class="bottom-icon-text">客服</div>
        </div>
        <div class="bottom-icon-item cart-icon-wrap" @click="$router.push('/market/cart')">
          <svg class="bottom-icon"><use xlink:href="#icon-gouwuche"></use></svg>
          <div class="bottom-icon-text">购物车</div>
          <span class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</span>
        </div>
      </div>
      <button class="btn-cart" @click="addToCart">加入购物车</button>
      <button class="btn-buy">立即购买</button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

// 商品数据映射表应放在export default外部
const goodsMap = {
  2: {
    title: '福保罗·夏季男生穿搭夏天干净短袖套装搭配t恤推荐男装港风夏装男裤F243',
    subtitle: '八套简单干净韩系穿搭 160-185cm男生穿搭夏天干净',
    imgs: [
    require('/public/img/shop/detail/2/shopbanner8.png'),
    require('/public/img/shop/detail/2/shopbanner2.png'),
    require('/public/img/shop/detail/2/shopbanner3.png'),
    require('/public/img/shop/detail/2/shopbanner4.png'),
    require('/public/img/shop/detail/2/shopbanner5.png'),
    require('/public/img/shop/detail/2/shopbanner6.png'),
    require('/public/img/shop/detail/2/shopbanner7.png'),
    require('/public/img/shop/detail/2/shopbanner1.png'),
    ],
    price: '149.52',
    oldPrice: '178',
    sold: '2',
    tags: ['限时立减28.48', '3期免息', '正品保障', '极速退款'],
    desc: '福保罗·夏季男生穿搭夏天干净短袖套装搭配t恤推荐男装港风夏装男裤F243，时尚潮流，舒适透气，适合多种场合穿搭，品质保证，售后无忧。',
    delivery: 26
  },
  1: {
    title: '真零·酸奶1KG桶装发酵风味低温酸奶营养',
    subtitle: '生牛乳>99.9% 添加7种有益菌 低温营养健康美味',
    imgs: [
      require('/public/img/shop/detail/1/shopbanner1.png'),
      require('/public/img/shop/detail/1/shopbanner2.png'),
      require('/public/img/shop/detail/1/shopbanner3.png'),
      require('/public/img/shop/detail/1/shopbanner4.png'),
      require('/public/img/shop/detail/1/shopbanner5.png'),
    ],
    price: '29.9',
    oldPrice: '39.9',
    sold: '5万+',
    tags: ['限时立减10', '假一赔四'],
    desc: '优质生牛乳发酵，7种益生菌，低温营养，健康美味，家庭装更实惠。',
    delivery: 26
  },
  3: {
    title: '无鞋带一脚蹬',
    subtitle: '春日复古德训 chill感的秘诀',
    imgs: [
      'https://img.yzcdn.cn/vant/cat.jpeg',
      'https://img.yzcdn.cn/vant/cat.jpeg',
    ],
    price: '338',
    oldPrice: '',
    sold: '308',
    tags: [],
    desc: '复古德训风格，舒适百搭，春日出街必备。',
    delivery: 48
  },
  4: {
    title: '纯色排汗速干背心男跑步训练休闲透气素肤速',
    subtitle: '',
    imgs: [
      'https://img.yzcdn.cn/vant/cat.jpeg',
      'https://img.yzcdn.cn/vant/cat.jpeg',
    ],
    price: '16.91',
    oldPrice: '39.9',
    sold: '2588',
    tags: ['限时立减9.3', '3期免息'],
    desc: '速干透气，运动休闲两相宜，夏日必备单品。',
    delivery: 48
  }
};

export default {
  name: 'MarketDetail',
  data() {
    return {
      detail: {},
      currentImgIdx: 0,
      comments: [
        { id: 1, user: '月凝寒', avatar: require('/public/img/shop/detail/2/shoptitle1.png'), content: '尺码合适，价格便宜值得购买，喜欢的抓紧咯', date: '02-06', place: '辽宁' },
        { id: 2, user: '黑裙', avatar:  require('/public/img/shop/detail/2/shoptitle2.png'), content: '质量很好，穿着舒服，推荐！', date: '01-12', place: '广东' },
        { id: 3, user: '上善若水', avatar:  require('/public/img/shop/detail/2/shoptitle3.png'), content: '发货快，服务好，满意的一次购物体验', date: '2024-12-14', place: '福建' }
      ]
    }
  },  
  computed: {
    currentImg() {
      return this.detail.imgs && this.detail.imgs[this.currentImgIdx] || '';
    },
    ...mapGetters('cart', ['cartCount'])
  },
  created() {
    const id = this.$route.params.id;
    this.detail = goodsMap[id] || goodsMap[1];
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    goComment() {
      this.$router.push(`/market/comment/${this.$route.params.id}`);
    },
    scrollToImg(idx) {
      this.currentImgIdx = idx;
      const scroll = this.$refs.swiperScroll;
      if (scroll) {
        const imgWidth = 700;
        scroll.scrollTo({ left: idx * imgWidth, behavior: 'smooth' });
      }
    },
    onScroll(e) {
      const scroll = e.target;
      const imgWidth = 700;
      const idx = Math.round(scroll.scrollLeft / imgWidth);
      this.currentImgIdx = idx;
    },
    addToCart() {
      this.$store.commit('cart/ADD_TO_CART', {
        id: this.$route.params.id,
        ...this.detail
      });
    }
  }
}
</script>

<style scoped>
.detail-page {
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.detail-swiper {
  width: 100%;
  background: #f7f7f7;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-bottom: 18px;
}
.back-arrow {
  position: fixed;
  top: 18px;
  left: 18px;
  width: 36px;
  height: 36px;
  z-index: 10;
  background: none;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  display: block;
}
.swiper-scroll {
  width: 100%;
  overflow-x: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 10px;
}
.detail-main-img {
  width: 700px;
  height: 1440px;
  object-fit: cover;
  border-radius: 18px;
  background: #f7f7f7;
  margin: 0 12px 0 0;
  scroll-snap-align: start;
  flex-shrink: 0;
  border: 2px solid transparent;
}

.detail-thumb-list {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
}
.detail-thumb-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
}
.detail-thumb-img.active {
  border: 2px solid #fe2c55;
}
.detail-thumb-count {
  font-size: 22px;
  color: #888;
  margin-left: 12px;
}
.detail-price-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 32px 32px 0 32px;
}
.detail-old-price {
  color: #bbb;
  font-size: 25px;
  text-decoration: line-through;
}
.detail-price {
  color: #fe2c55;
  font-size: 32px;
  font-weight: bold;
  background: #fff0f0;
  border-radius: 12px;
  padding: 6px 18px;
}
.detail-sold {
  color: #bbb;
  font-size: 22px;
}
.detail-tags {
  display: flex;
  gap: 12px;
  margin: 18px 32px 0 32px;
}
.detail-tag {
  background: #fff0f0;
  color: #fe2c55;
  font-size: 20px;
  border-radius: 8px;
  padding: 4px 14px;
}
.detail-title {
  font-size: 40px;
  font-weight: bold;
  color: #222;
  margin: 32px 32px 0 32px;
  line-height: 1.3;
}
.detail-subtitle {
  font-size: 25px;
  color: #888;
  margin: 12px 32px 0 32px;
  line-height: 1.3;
}
.detail-service {
  display: flex;
  gap: 16px;
  margin: 24px 32px 0 32px;
  flex-wrap: wrap;
}
.service-item {
  font-size: 22px;
  color: #888;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 4px 14px;
}
.service-item.green {
  color: #1ec36b;
  background: #e6f9f0;
}
.detail-desc {
  font-size: 25px;
  color: #222;
  line-height: 1.6;
  margin: 32px 32px 0 32px;
}
/* 评论区样图风格 */
.detail-comment-bar2 {
  background: #fff;
  margin: 32px 32px 0 32px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 18px 20px 18px 20px;
  cursor: pointer;
}
.comment-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.comment-bar-title {
  font-size: 28px;
  color: #222;
  font-weight: bold;
}
.comment-bar-more {
  font-size: 22px;
  color: #bbb;
}
.comment-bar-list {
  display: flex;
  align-items: center;
}
.comment-bar-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.comment-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
}
.comment-bar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.comment-bar-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.comment-bar-nick {
  font-size: 22px;
  color: #222;
  font-weight: bold;
}
.comment-bar-tag {
  font-size: 18px;
  color: #fe2c55;
  background: #fff0f0;
  border-radius: 6px;
  padding: 2px 8px;
}
.comment-bar-stars {
  font-size: 18px;
  color: #fe2c55;
}
.comment-bar-content {
  font-size: 24px;
  color: #222;
  margin-bottom: 4px;
}
.comment-bar-meta {
  font-size: 18px;
  color: #bbb;
}
.comment-bar-like {
  width: 28px;
  height: 28px;
  margin-left: 8px;
}
.detail-bottom-bar {
  display: flex;
  align-items: center;
  padding: 0 0 0 0;
  background: #fff;
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
  border-top: 1px solid #f0f0f0;
  min-height: 110px;
  z-index: 10;
}
.bottom-icon-group {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  padding: 0 12px;
}
.bottom-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100%;
  color: #8b8b8b;
}
.bottom-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
}
.bottom-icon-text {
  font-size: 22px;
  color: #8b8b8b;
}
.btn-cart {
  flex: 1;
  background: #fff0f0;
  color: #fe2c55;
  font-size: 28px;
  border: none;
  border-radius: 0;
  padding: 32px 0;
  font-weight: bold;
  margin: 0;
}
.btn-buy {
  flex: 1;
  background: #fe2c55;
  color: #fff;
  font-size: 28px;
  border: none;
  border-radius: 0;
  padding: 32px 0;
  font-weight: bold;
  margin: 0;
}
.cart-icon-wrap {
  position: relative;
}
.cart-badge {
  position: absolute;
  top: 2px;
  right: 10px;
  background: #fe2c55;
  color: #fff;
  font-size: 18px;
  border-radius: 50%;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
}
</style> 